

.container{
    background: $white-grey;
}
.scroll{
    height: 100vh;
    
}
.scroll-box{
    @include padding-box(0 30rpx);
}
.top{
    background: #ffffff;
    border-radius: 16rpx 16rpx 0 0;
    margin-top: 30rpx;
    @include padding-box(30rpx 24rpx);
    .top-box{
        @include space-between;
        margin-top: 0;
        @include padding-box(0 36rpx);
    }
    .active-box{
        background: $white-grey;
        border-radius: 18rpx;
        @include padding-box(24rpx 36rpx);
        margin-top: 30rpx;
    }
    .float-box{
        width: 50%;
        .left-num{
            display: flex !important;
            justify-content: flex-start !important;
        }
        .right-num{
            display: flex !important;
            justify-content: flex-end !important;
        }
    }
    .float{
        text-align: left;
        .num{
            color: $black;
            font-size: 46rpx;
            font-weight: 900; 
            display: flex;
            align-items: baseline;
            justify-content: center;
        }
        .unit{
            color: #202536;
            font-size: 18rpx;
            font-weight: 400;
            margin:0 0 14rpx 2rpx;
        }
        .title{
            font-size: $font-small;
            color: $grey;
            // margin-top: 16rpx;
        }
        .right-title{
            text-align: right;
        }
    }
    .active{
        width: 1rpx;
        height: 78rpx;
        border-right: 1rpx solid #E8E9EA;
    }
}
.contract-i{
    background: #ffffff;
    margin: 24rpx 0;
    @include padding-box(30rpx);
    border-radius: 8rpx;
    .title{
        color: $black;
        font-weight: 600;
        font-size: $font-normal;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-left{
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .title-right{
            @include padding-box(3rpx 14rpx);
            color: $green;
            font-size: 24rpx;
            border-radius: 18rpx;
            border: 1rpx solid #00D679;
            flex: none;
        }
    }
    .message-box{
        background: $white;
        border-radius: 8rpx;
        padding: 0 30rpx;
    }
}
.launch{
    @include padding-box(30rpx);
    text-align: center;
    height: 92rpx;
    border-radius: 0 0 16rpx 16rpx;
    background: $green;
    color: #FFFFFF;
    font-size: 32rpx;
}
.popup-box{
    @include padding-box(0 30rpx);
    width: 100%;
}
.popup-input-block{
    display: flex;
    align-items: center;
    background: #FAFAFC;
    border-radius: 8px;
    @include padding-box(30rpx 22rpx);
    margin-top: 30rpx;
    .popup-name{
        color: #202536;
        font-size: 32rpx;
    }
    .popup-input{
        font-size: 32rpx;
        flex: 1;
    }
}
.tab{
    margin-top: 20rpx;
}
.tab-margin {
    margin-right: 80rpx !important;
}
// .mecism{
    // white-space: nowrap;
    // text-overflow: ellipsis;
    // overflow: hidden;
// }
// .elastic{
//     display: flex;
//     align-items: center;
// }
@include popup-input;
@include tip;